<template>
  <div class="main">
    <div class="answerReplyDetail">
      <goBack v-show="!hideHeader" :white="true" :hasTitle="true" topTitle="回复详情"></goBack>
      <scroller lock-x @on-scroll-bottom="infinite"  :scroll-bottom-offst="150">
        <div class="scrollerDiv">
          <div class="mainContainer">
            <div class="topArea">
              <div class="leftAvatar">
                <img v-if="answerDetail.avatar" :src="answerDetail.avatar" alt="">
                <img v-else src="~/static/default.png" alt="">
              </div>
              <div class="rightAnswerTitle">
                <div class="line_1">
                  <div class="left">
                    <div class="proName">{{ answerDetail.name }}</div>
                    <div class="ansTime">{{ answerDetail.createtime ? (new Date(answerDetail.createtime)).format('yyyy-MM-dd hh:mm') : '' }}</div>
                  </div>
                  <div :class="['right', answerDetail.followStatus == 1 ? 'hasAttention' : '']" @click="getAttention()">{{ answerDetail.followStatus == 1 ? '已关注' : '+ 关注'}}</div>
                </div>
                <div class="line_2">{{ answerDetail.text }}</div>
                <div class="line_3">
                  <div class="left" @click="getProfessorHelp()">
                    <i v-if="answerDetail.isLiked == 0" class="icon_zan_n"></i>
                    <i v-else class="icon_zan_s"></i>
                    <span :class="[answerDetail.isLiked == 1 ? 'isLiked' : '']">{{ answerDetail.helpCount > 0 ? answerDetail.helpCount : '有帮助' }}</span>
                  </div>
                  <div class="right" @click="handleAnswerTheQuestion(answerDetail)"><i class="bg-com_icon_ask_gray_40"></i></div>
                </div>
              </div>
            </div>
            <div class="ansReplyList">
              <div class="replyItem" v-for="(m, n) of replyAnswerList" :key="n">
                <div class="rp_left">
                  <img v-if="m.replyUserHeadImg" :src="m.replyUserHeadImg" alt="">
                  <img v-else src="~/static/default.png" alt="">
                </div>
                <div class="rp_right">
                  <div class="whoToWho">{{ m.replyUserName }} <span>回复</span> {{ m.toUserName }}</div>
                  <div class="rpContent">{{ m.content }}</div>
                  <div class="bottom">
                    <div class="rpTime">{{ m.createTime ? (new Date(m.createTime)).format('yyyy-MM-dd hh:mm') : '' }}</div>
                    <div class="rpBtn" @click="handleAnswerTheQuestion(m)"><i class="bg-com_icon_ask_gray_40"></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <load-more :show-loading="showLoading" :bounce="false" :tip="tipmsg"></load-more>
          <div style="width: 100%; height: 1rem;"></div>
        </div>
      </scroller>  
    </div>
    <div v-transfer-dom>
      <popup v-model="ansDialog" position="bottom" style="background:transparent">
        <div class="answerArea">
          <div class="dialogTopArea">
            <div class="left">
              <div class="tip">追问</div>
              <div class="userName">{{ answerToUserName }}</div>
            </div>
          
            <i class="right"  @click="ansDialog = false; replyContent = ''" ></i>
          </div>
          <div class="textArea">
            <textarea v-model="replyContent" cols="50" rows="5" placeholder="请输入追问内容"></textarea>
          </div>
          <div class="btnArea">
            <div class="ansBtn" @click="handleMakeComments()">发表追问</div>
          </div>
        </div>
      </popup>
    </div>
  </div>  
</template>

<script>
import goBack from "~/components/goBack";
import { replyAnswerList, agencyfollowUser, professorHelp, myPersonalInfo, replyAnswer } from '~/api/identity'
import { Scroller, LoadMore, TransferDom, Popup } from "vux";
import { format } from "~/plugins/filter";
import ls from 'store2'
export default {
  components: {
    goBack,
    Popup,
    Scroller,
    LoadMore
  },
  directives: {
    TransferDom
  },
  data() {
    return {
      showLoading: true,
      tipmsg: '加载更多',
      replyParams: {
        "answerId": null,
        "pageNo": 1,
        "pageSize": 5
      },
      replyAnswerList: [],
      answerDetail: {}, // 问题详情
      ansDialog: false,
      answerToUserName: '',
      replyContent: '', // 追问内容
      rpDetail: {}, // 回复的数据信息
      personalInfo: {},
      totalPages: 0,
      hideHeader: false
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true
    }
  },
  mounted() {
    this.answerDetail = JSON.parse(this.$route.query.type)
    this.replyParams.answerId = this.answerDetail.answerId 
    this.$visit('AnswerDetails/'+this.answerDetail.answerId)
    this.getReplyAnswerList()
  },
  methods: {
    getReplyAnswerList() {
      this.$loading('open')
      replyAnswerList(this.replyParams).then(res => {
        this.replyAnswerList = res.data.list
        const total = res.data.total
        this.totalPages = Math.ceil(total / res.data.pageSize)
      }).finally(() => {
        this.$hideLoading()
      })
    },
    infinite() {
      if (this.replyParams.pageNo < this.totalPages) {
        this.replyParams.pageNo = this.replyParams.pageNo + 1;
        replyAnswerList(this.replyParams).then(res => {
          if (res.code == "0") {
            let newArr = res.data.list;
            this.replyAnswerList = this.replyAnswerList.concat(newArr);
            const total = res.data.total
            this.totalPages = Math.ceil(total / res.data.pageSize);
          }
        });
      } else {
        this.showLoading = false;
        this.tipmsg = "没有更多课程"
      }
    },
    // 关注与取消关注
    getAttention() {
      this.$loading('open');
      let statusAction = 0; // 1:关注   0:取消关注
      if (this.answerDetail.followStatus == 0) {
        this.answerDetail.followStatus = 1; // 已关注
        statusAction = 1;
      } else {
        this.answerDetail.followStatus = 0; // 未关注
        statusAction = 0
      }
      agencyfollowUser({
        action: statusAction,
        toUserId: this.answerDetail.userId
      }).then(() => {
        this.$hideLoading();
      }).catch(error => {
        this.$vux.toast.text('网络故障，请稍后重试~');
        this.$hideLoading();
      })
    },
    // 点赞
    getProfessorHelp() {
      this.$loading('open')
      let statusAction = 0; // 1:点赞   0:取消点赞
      if (this.answerDetail.isLiked == 0) {
        this.answerDetail.isLiked = 1
        statusAction = 1
      } else {
        this.answerDetail.isLiked = 0
        statusAction = 0
      }
      professorHelp({
        action: statusAction,
        id: this.answerDetail.answerId
      }).then(res => {
        this.answerDetail.helpCount = res.data.helpCount
      }).catch(err => {
        this.$vux.toast.text('网络故障，请稍后重试~');
      }).finally(() => {
        this.$hideLoading()
      })
    },
    // 追问
    handleAnswerTheQuestion(data) {
      this.ansDialog = true
      if (data.id) {
        this.answerToUserName = data.name
      } else {
        this.answerToUserName = data.replyUserName
      }
      this.rpDetail = data
    },
    // 发表追问
    handleMakeComments() {
      this.$loading('open')
      const params = {
        "answerId": this.rpDetail.answerId,
        "content": this.replyContent,
        "replyUserHeadImg": this.personalInfo.avatar,
        "replyUserId": ls.get('yxkData').userId,
        "replyUserName": this.personalInfo.nickName,
        "replyUserSection": 0,
        "toUserId": this.rpDetail.id ? this.rpDetail.userId : this.rpDetail.replyUserId,
        "toUserName": this.rpDetail.id ? this.rpDetail.name : this.rpDetail.replyUserName,
        "toUserSection": this.rpDetail.id ? 1 : this.rpDetail.replyUserSection
      }
      // 追问回复
      replyAnswer(params).then(res => {
        this.ansDialog = false; 
        this.replyContent = '';
        this.replyParams.pageNo = 1;
        this.getReplyAnswerList()
      }).finally(() => {
        this.$hideLoading()
      })
    },
    // 获取用户信息
    getUserInfo() {
      myPersonalInfo().then(res => {
        if (res.code == 0) {
          this.personalInfo = res.data
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .answerReplyDetail {
    width: 100%;
    height: 100vh;
    .scrollerDiv {
      .mainContainer {
        .topArea {
          padding: 0.32rem 0.32rem 0.4rem;
          margin-bottom: 0.24rem;
          background: #fff;
          display: flex;
          justify-content: flex-start;
          .leftAvatar {
            width: 0.8rem;
            height: 0.8rem;
            margin-right: 0.24rem;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .rightAnswerTitle {
            flex: 1;
            .line_1 {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 0.14rem;
              .left {
                .proName {
                  margin-top: 0.06rem;
                  margin-bottom: 0.16rem;
                  color: #222;
                  font-size: 0.3rem;
                  line-height: 0.3rem;
                  font-weight: bold;
                }
                .ansTime {
                  color: #C7C7C7;
                  font-size: 0.24rem;
                  line-height: 0.26rem;
                }
              }
              .right {
                width: 1.25rem;
                height: 0.58rem;
                border-radius: 0.3rem;
                border: 1px solid @mainColor;
                color: @mainColor;
                font-size: 0.26rem;
                text-align: center;
                line-height: 0.58rem;
              }
              .hasAttention {
                border-color: #F7F7FA;
                background: #F7F7FA;
                color: #C7C7C7;
              }
            }
            .line_2 {
              color: #222;
              font-size: 0.28rem;
              line-height: 0.44rem;
              margin-bottom: 0.25rem;
            }
            .line_3 {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .left {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                i {
                  display: inline-block;
                  width: 0.4rem;
                  height: 0.4rem;
                  margin-right: 0.08rem;
                }
                .icon_zan_n {
                  background: url('~/static/sprite/other_sprites.png') 3.4rem -3.2rem;
    			        background-size: 4.68rem 4.08rem;
                }
                .icon_zan_s {
                  background: url('~/static/sprite/other_sprites.png') 2.8rem -3.2rem;
    			        background-size: 4.68rem 4.08rem;
                }
                span {
                  font-size: 0.26rem;
                  color: #C7C7C7;
                }
                .isLiked {
                  color: #FFBD3E;
                }
              }
              .right {
                width: 0.4rem;
                height: 0.4rem;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
        .ansReplyList {
          padding: 0.4rem 0.32rem;
          background: #fff;
          .replyItem {
            display: flex;
            justify-content: flex-start;
            padding-bottom: 0.32rem;
            margin-bottom: 0.32rem;
            border-bottom: 1px solid #E5E8ED;
            .rp_left {
              width: 0.48rem;
              height: 0.48rem;
              margin-right: 0.16rem;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .rp_right {
              flex: 1;
              .whoToWho {
                color: #222;
                font-size: 0.28rem;
                font-weight: bold;
                margin-bottom: 0.13rem;
                span {
                  color: #C7C7C7;
                  font-weight: normal;
                  margin: 0 0.16rem;
                }
              }
              .rpContent {
                color: #222;
                font-size: 0.28rem;
                line-height: 0.44rem;
                margin-bottom: 0.24rem;
              }
              .bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .rpTime {
                  color: #C7C7C7;
                  font-size: 0.28rem;
                }
                .rpBtn {
                  width: 0.4rem;
                  height: 0.4rem;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
          .replyItem:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }  
  .answerArea {
    background: #fff;
    border-radius: 0.1rem 0.1rem 0 0;
    .dialogTopArea {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 0.88rem;
      padding: 0.23rem 0.32rem;
      border-bottom: 1px solid #E5E8ED;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .tip {
          color: #999;
          font-size: 0.3rem;
          margin-right: 0.16rem;
        }
        .userName {
          color: #222;
          font-size: 0.3rem;
          font-weight: bold;
        }
      }
      .right {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.7rem;
        background-size:3rem 2.4rem; 
      }
    }
    .textArea {
      textArea {
        font-size: 0.28rem;
        line-height: 0.4rem;
        width: 100%;
        border: none;
        outline: none;
        padding: 0.46rem 0.32rem 0.34rem;
        resize: none;
        color: #222;
      }
    }
    .btnArea {
      width: 100%;
      height: 0.88rem;
      padding-right: 0.32rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .ansBtn {
        padding: 0.16rem 0.24rem;
        line-height: 0.3rem;
        text-align: center;
        border-radius: 0.31rem;
        background: @mainColor;
        color: #fff;
        font-size: 0.26rem;
      }
    }
  }
  textArea::-webkit-input-placeholder{
    color:#C7C7C7;
  }
  textArea:-moz-placeholder{
      color:#C7C7C7;
  }
  textArea::-moz-placeholder{
      color:#C7C7C7;
  }
  textArea:-ms-input-placeholder{
      color:#C7C7C7;
  }
</style>
